<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文学城</title>
    <style>
        /* 全局样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
        }
        
        a {
            text-decoration: none;
            color: #333;
        }
        
        ul, li {
            list-style: none;
        }
        
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }
        
        /* 顶部导航 */
        .header {
            background-color: #fff;
            padding: 10px 0;
            border-bottom: 1px solid #e6e6e6;
        }
        
        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px 0;
            font-size: 12px;
        }
        
        .top-bar-right a {
            margin-left: 10px;
            color: #666;
        }
        
        .logo {
            text-align: center;
            padding: 10px 0;
        }
        
        .logo img {
            height: 60px;
        }
        
        .main-nav {
            background-color: #8cc63f;
            border-radius: 5px;
            margin: 10px 0;
        }
        
        .main-nav ul {
            display: flex;
            justify-content: space-around;
        }
        
        .main-nav a {
            color: #fff;
            padding: 10px 15px;
            display: inline-block;
        }
        
        .main-nav a:hover {
            background-color: #76b32e;
        }
        
        /* 主要内容区域 */
        .main-content {
            background-color: #fff;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        
        /* 分类区域 */
        .category-section {
            margin-bottom: 20px;
        }
        
        .category-title {
            background-color: #8cc63f;
            color: #fff;
            padding: 8px 15px;
            border-radius: 5px;
            margin-bottom: 10px;
            font-weight: bold;
        }
        
        .book-list {
            display: flex;
            flex-wrap: wrap;
        }
        
        .book-item {
            width: 50%;
            padding: 5px 10px;
            border-bottom: 1px dashed #e6e6e6;
        }
        
        /* 书籍封面 */
        .book-cover {
            width: 80px;
            height: 110px;
            background-color: #f0f0f0;
            margin-right: 10px;
            float: left;
        }
        
        .book-info {
            overflow: hidden;
        }
        
        /* 按钮样式 */
        .btn {
            display: inline-block;
            padding: 8px 15px;
            background-color: #8cc63f;
            color: #fff;
            border-radius: 3px;
            margin-right: 10px;
            margin-bottom: 10px;
            cursor: pointer;
        }
        
        .btn:hover {
            background-color: #76b32e;
        }
        
        /* 底部 */
        .footer {
            background-color: #fff;
            padding: 15px 0;
            text-align: center;
            font-size: 12px;
            border-top: 1px solid #e6e6e6;
            margin-top: 20px;
        }
        
        .footer-links {
            margin-bottom: 10px;
        }
        
        .footer-links a {
            margin: 0 10px;
            color: #666;
        }
        
        /* 首页横幅 */
        .banner {
            width: 100%;
            height: 200px;
            background-color: #f0f0f0;
            margin-bottom: 20px;
            border-radius: 5px;
            overflow: hidden;
        }
        
        /* 详情页样式 */
        .detail-container {
            display: flex;
            margin-bottom: 20px;
        }
        
        .detail-cover {
            width: 150px;
            height: 200px;
            background-color: #f0f0f0;
            margin-right: 20px;
        }
        
        .detail-info {
            flex: 1;
        }
        
        .detail-title {
            font-size: 24px;
            margin-bottom: 10px;
        }
        
        .detail-meta {
            color: #666;
            margin-bottom: 10px;
            font-size: 14px;
        }
        
        .detail-intro {
            line-height: 1.6;
            margin-bottom: 20px;
        }
        
        /* 列表页样式 */
        .list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .list-title {
            font-size: 18px;
            font-weight: bold;
        }
        
        .list-sort {
            display: flex;
        }
        
        .list-sort a {
            margin-left: 15px;
            color: #666;
        }
        
        /* 个人主页样式 */
        .profile-header {
            text-align: center;
            padding: 20px 0;
            border-bottom: 1px solid #e6e6e6;
            margin-bottom: 20px;
        }
        
        .profile-avatar {
            width: 100px;
            height: 100px;
            background-color: #f0f0f0;
            border-radius: 50%;
            margin: 0 auto 10px;
        }
        
        .profile-name {
            font-size: 18px;
            margin-bottom: 5px;
        }
        
        .profile-stats {
            color: #666;
            font-size: 14px;
        }
        
        .profile-stats span {
            margin: 0 10px;
        }
        
        /* 页面切换 */
        .page-container {
            display: none;
        }
        
        .page-container.active {
            display: block;
        }
        
        /* 按钮组 */
        .btn-group {
            margin-top: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 页面容器 -->
    <div class="container">
        <!-- 顶部导航 -->
        <div class="header">
            <div class="top-bar clearfix">
                <div class="top-bar-left">
                    <span>北京时间 2025年6月2日 17:19</span>
                </div>
                <div class="top-bar-right">
                    <a href="#" class="add-favorite">加为收藏</a>
                    <a href="#" class="set-homepage">设为首页</a>
                    <a href="#" class="font-size">繁体版</a>
                    <a href="#" class="app-download">APP下载</a>
                    <a href="#" class="login">登录</a>
                    <a href="#" class="register">注册</a>
                    <a href="#" class="find-account">找回账号</a>
                    <a href="#" class="find-password">找回密码</a>
                </div>
            </div>
            <div class="logo">
                <a href="index.html">
                    <img src="" alt="文学城">
                </a>
            </div>
            <nav class="main-nav">
                <ul>
                    <li><a href="#" class="nav-link active" data-page="home">首页</a></li>
                    <li><a href="#" class="nav-link" data-page="list">言情小说</a></li>
                    <li><a href="#" class="nav-link" data-page="list">纯爱小说</a></li>
                    <li><a href="#" class="nav-link" data-page="list">衍生/轻小说</a></li>
                    <li><a href="#" class="nav-link" data-page="list">无CP+小说</a></li>
                    <li><a href="#" class="nav-link" data-page="list">百合小说</a></li>
                    <li><a href="#" class="nav-link" data-page="profile">个人中心</a></li>
                </ul>
            </nav>
        </div>
        
        <!-- 页面内容 -->
        <div class="content">
            <!-- 首页 -->
            <div id="home-page" class="page-container active">
                <div class="main-content">
                    <div class="banner">
                        <!-- 横幅图片占位符 -->
                    </div>
                    
                    <!-- 言情小说 -->
                    <div class="category-section">
                        <h3 class="category-title">言情小说</h3>
                        <div class="book-list">
                            <div class="book-item">
                                <div class="book-cover"></div>
                                <div class="book-info">
                                    <a href="#" class="book-title">短篇萌妻火上学</a>
                                </div>
                            </div>
                            <div class="book-item">
                                <div class="book-cover"></div>
                                <div class="book-info">
                                    <a href="#" class="book-title">如何为犬类特工佛上无间</a>
                                </div>
                            </div>
                            <div class="book-item">
                                <div class="book-cover"></div>
                                <div class="book-info">
                                    <a href="#" class="book-title">穿越赛博游戏后开挂BOSS</a>
                                </div>
                            </div>
                            <div class="book-item">
                                <div class="book-cover"></div>
                                <div class="book-info">
                                    <a href="#" class="book-title">戏水</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 纯爱小说 -->
                    <div class="category-section">
                        <h3 class="category-title">纯爱小说</h3>
                        <div class="book-list">
                            <div class="book-item">
                                <div class="book-cover"></div>
                                <div class="book-info">
                                    <a href="#" class="book-title">纳迎虹</a>
                                </div>
                            </div>
                            <div class="book-item">
                                <div class="book-cover"></div>
                                <div class="book-info">
                                    <a href="#" class="book-title">天宫寻思</a>
                                </div>
                            </div>
                            <div class="book-item">
                                <div class="book-cover"></div>
                                <div class="book-info">
                                    <a href="#" class="book-title">在无限游戏里种树</a>
                                </div>
                            </div>
                            <div class="book-item">
                                <div class="book-cover"></div>
                                <div class="book-info">
                                    <a href="#" class="book-title">星光呢喃</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 衍生/轻小说 -->
                    <div class="category-section">
                        <h3 class="category-title">衍生/轻小说</h3>
                        <div class="book-list">
                            <div class="book-item">
                                <div class="book-cover"></div>
                                <div class="book-info">
                                    <a href="#" class="book-title">开局给侯爵唱戏、养猫</a>
                                </div>
                            </div>
                            <div class="book-item">
                                <div class="book-cover"></div>
                                <div class="book-info">
                                    <a href="#" class="book-title">深海无常后我红了</a>
                                </div>
                            </div>
                            <div class="book-item">
                                <div class="book-cover"></div>
                                <div class="book-info">
                                    <a href="#" class="book-title">被手脚怪坏男孩盯上了</a>
                                </div>
                            </div>
                            <div class="book-item">
                                <div class="book-cover"></div>
                                <div class="book-info">
                                    <a href="#" class="book-title">我开动物园那些年</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 功能按钮 -->
                    <div class="btn-group">
                        <a href="#" class="btn" data-page="upload">原创小说</a>
                        <a href="#" class="btn" data-page="complete">完结文库</a>
                        <a href="#" class="btn" data-page="publish">出版影视</a>
                        <a href="#" class="btn" data-page="short">中短篇小说</a>
                        <a href="#" class="btn" data-page="children">小书喵悦读</a>
                    </div>
                </div>
            </div>
            
            <!-- 详情页 -->
            <div id="detail-page" class="page-container">
                <div class="main-content">
                    <div class="detail-container">
                        <div class="detail-cover">
                            <!-- 小说封面占位符 -->
                        </div>
                        <div class="detail-info">
                            <h1 class="detail-title">漫画甜人自救指南</h1>
                            <div class="detail-meta">
                                <span>作者: 某某人</span> | 
                                <span>分类: 原创 | </span>
                                <span>字数: 12.5万字</span> | 
                                <span>更新: 连载中</span>
                            </div>
                            <div class="detail-intro">
                                <h3>【文案】</h3>
                                某某人，一个漫画迷，每天最大的乐趣就是看各种漫画。然而有一天，他发现自己竟然穿越到了一本漫画中，成为了漫画中的一个角色。为了不被主角光环伤害，他决定自救，于是开启了一段奇妙的旅程。
                            </div>
                            <div class="btn-group">
                                <a href="#" class="btn">开始阅读</a>
                                <a href="#" class="btn">加入书架</a>
                                <a href="#" class="btn">打赏作者</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 列表页 -->
            <div id="list-page" class="page-container">
                <div class="main-content">
                    <div class="list-header">
                        <h2 class="list-title">言情小说</h2>
                        <div class="list-sort">
                            <a href="#">综合排序</a>
                            <a href="#">最新</a>
                            <a href="#">热门</a>
                            <a href="#">评分</a>
                        </div>
                    </div>
                    
                    <div class="book-list">
                        <div class="book-item">
                            <div class="book-cover"></div>
                            <div class="book-info">
                                <a href="#" class="book-title">漫画甜人自救指南</a>
                                <div class="book-author">作者: 某某人</div>
                                <div class="book-meta">字数: 12.5万字 | 连载中</div>
                            </div>
                        </div>
                        <div class="book-item">
                            <div class="book-cover"></div>
                            <div class="book-info">
                                <a href="#" class="book-title">第一次做人</a>
                                <div class="book-author">作者: 某某人</div>
                                <div class="book-meta">字数: 15.8万字 | 连载中</div>
                            </div>
                        </div>
                        <div class="book-item">
                            <div class="book-cover"></div>
                            <div class="book-info">
                                <a href="#" class="book-title">我在异世界开书店</a>
                                <div class="book-author">作者: 某某人</div>
                                <div class="book-meta">字数: 18.3万字 | 连载中</div>
                            </div>
                        </div>
                        <div class="book-item">
                            <div class="book-cover"></div>
                            <div class="book-info">
                                <a href="#" class="book-title">新书上架</a>
                                <div class="book-author">作者: 某某人</div>
                                <div class="book-meta">字数: 2.5万字 | 连载中</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="btn-group">
                        <a href="#" class="btn">查看更多</a>
                    </div>
                </div>
            </div>
            
            <!-- 个人主页 -->
            <div id="profile-page" class="page-container">
                <div class="main-content">
                    <div class="profile-header">
                        <div class="profile-avatar">
                            <!-- 用户头像占位符 -->
                        </div>
                        <h3 class="profile-name">用户名称</h3>
                        <div class="profile-stats">
                            <span>发文: 128</span>
                            <span>评论: 256</span>
                            <span>粉丝: 512</span>
                            <span>关注: 256</span>
                        </div>
                    </div>
                    
                    <div class="category-section">
                        <h3 class="category-title">我的作品</h3>
                        <div class="book-list">
                            <div class="book-item">
                                <div class="book-cover"></div>
                                <div class="book-info">
                                    <a href="#" class="book-title">漫画甜人自救指南</a>
                                    <div class="book-meta">字数: 12.5万字 | 连载中</div>
                                </div>
                            </div>
                            <div class="book-item">
                                <div class="book-cover"></div>
                                <div class="book-info">
                                    <a href="#" class="book-title">第一次做人</a>
                                    <div class="book-meta">字数: 15.8万字 | 连载中</div>
                                </div>
                            </div>
                            <div class="book-item">
                                <div class="book-cover"></div>
                                <div class="book-info">
                                    <a href="#" class="book-title">我在异世界开书店</a>
                                    <div class="book-meta">字数: 18.3万字 | 连载中</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="btn-group">
                        <a href="#" class="btn">发布作品</a>
                        <a href="#" class="btn">我的书架</a>
                        <a href="#" class="btn">阅读记录</a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部 -->
        <div class="footer">
            <div class="footer-links">
                <a href="#">关于我们</a>
                <a href="#">联系方式</a>
                <a href="#">联系客服</a>
                <a href="#">读者导航</a>
                <a href="#">作者导航</a>
                <a href="#">投稿须知</a>
                <a href="#">版权声明</a>
                <a href="#">广告服务</a>
                <a href="#">友情链接</a>
                <a href="#">常见问题</a>
                <a href="#">诊断工具</a>
            </div>
            <p>Copyright © 2025 文学城 All rights reserved</p>
        </div>
    </div>
    
    <script>
        // 页面切换功能
        document.addEventListener('DOMContentLoaded', function() {
            // 获取所有导航链接
            const navLinks = document.querySelectorAll('.nav-link');
            const pageContainers = document.querySelectorAll('.page-container');
            const bookItems = document.querySelectorAll('.book-item .book-title');
            
            // 为导航链接添加点击事件
            navLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除所有链接的active类
                    navLinks.forEach(l => l.classList.remove('active'));
                    
                    // 为当前点击的链接添加active类
                    this.classList.add('active');
                    
                    // 获取要显示的页面ID
                    const pageId = this.getAttribute('data-page') + '-page';
                    
                    // 隐藏所有页面
                    pageContainers.forEach(page => {
                        page.classList.remove('active');
                    });
                    
                    // 显示对应的页面
                    document.getElementById(pageId).classList.add('active');
                });
            });
            
            // 为书籍标题添加点击事件
            bookItems.forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 隐藏所有页面
                    pageContainers.forEach(page => {
                        page.classList.remove('active');
                    });
                    
                    // 显示详情页
                    document.getElementById('detail-page').classList.add('active');
                });
            });
            
            // 为功能按钮添加点击事件
            const buttons = document.querySelectorAll('.btn');
            buttons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    if (this.getAttribute('data-page')) {
                        const pageId = this.getAttribute('data-page') + '-page';
                        
                        // 隐藏所有页面
                        pageContainers.forEach(page => {
                            page.classList.remove('active');
                        });
                        
                        // 显示对应的页面
                        document.getElementById(pageId).classList.add('active');
                    }
                });
            });
        });
    </script>
</body>
</html>